<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 页面头部 -->
  <div class="site-header"></div>

  <div>轮播图</div>

  <!-- 放置渲染商品列表 -->
  <div class="home"></div>

  <!-- 页面尾部 -->
  <div class="site-footer"></div>

  <!-- 首页渲染推荐商品的模板 -->
  <script type="text/html" id="product-template">
    <ul class="product">
      {{each products prod}}
        <li class="product-item" data-id="{{prod.id}}" data-prod="{{prod}}">
          <img src="{{prod.image}}" alt="">
          <div class="title">{{prod.title}}</div>
          <div class="price">{{prod.price}}</div>
          <div class="add-to-cart">
            <span>加入购物车</span>
          </div>
        </li>
      {{/each}}
    </ul>
  </script>

  <script src="./libs/requirejs/require.js" data-main="./js/index"></script>
</body>
</html>